<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Chat Window</title>
        <script>
            var onlineUsersGridPanel;
            var onlineUsersDS;
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                var onlineUsersSM = new Ext.grid.CheckboxSelectionModel();
                var onlineUsersCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), onlineUsersSM, {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 10,
                    hidden: true
                }, {
                    header: "员工名称",
                    width: 70,
                    dataIndex: 'user_name'
                }]);
                
                onlineUsersDS = new Ext.data.Store({
                    // load using script tags for cross domain, if the data in on the same domain as
                    // this page, an HttpProxy would be better
                    proxy: new Ext.data.HttpProxy({
                        url: '/users/getOnlineUsers'
                    }),
                    // create reader that reads the Topic records
                    reader: new Ext.data.JsonReader({
                        root: 'root',
                        totalProperty: 'totalProperty',
                        id: 'id'
                    }, [{
                        name: 'id'
                    }, {
                        name: 'user_name'
                    }])
                });
                
                onlineUsersGridPanel = new Ext.grid.GridPanel({
                    border: false,
                    el: 'online_user_list',
                    ds: onlineUsersDS,
                    cm: onlineUsersCM,
                    sm: onlineUsersSM,
                    autoWidth: true,
                    width: 150,
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    iconCls: 'icon-grid',
                    collapsible: false,
                    animCollapse: false,
                    autoWidth: true,
                    //frame: true,
                    title: '在线用户'
                });
                
                //panel render
                onlineUsersGridPanel.render();
                // trigger the data store load
                onlineUsersDS.load();
                //
                var department = new Ext.form.ComboBox({
                    store: new Ext.data.Store({
                        proxy: new Ext.data.HttpProxy({
                            url: '/admin/getDepartments'
                        }),
                        reader: new Ext.data.JsonReader({
                            root: 'root',
                            id: 'id'
                        }, ['id', 'name'])
                    }),
                    name: 'department',
                    transform: 'department_list',
                    //applyTo: 'department_list',
                    //lazyRender : true,
                    loadingText: '正在加载...',
                    displayField: 'name',
                    valueField: 'id',
                    mode: 'remote',
                    triggerAction: 'all',
                    hiddenName: 'department_id',//如果不想提交displayField，则在这儿指定以提交ID的值
                    fieldLabel: '部门',
                    emptyText: '请选择部门...',
                    editable: false,
                    allowBlank: false,
                    width: 100,
                    maxHeight: 150,
                    tabIndex: 4
                });
                department.on('select', function(){
                    onlineUsersDS.baseParams.department_id = department.getValue();
                    onlineUsersDS.load();
                    //Ext.MessageBox.alert('提示', department.getValue());
                });
            });
            function sendMessage(){
                var m = onlineUsersGridPanel.getSelections();
                var chatTojsonData;
                var chatToNamejsonData;
                if (m.length > 0) {
                    chatTojsonData = "[";
                    chatToNamejsonData = "[";
                    for (var i = 0, len = m.length; i < len; i++) {
                        var ss = "{\"id\":\"" + m[i].get("id") + "\"}";
                        var ssname = "{\"id\":\"" + m[i].get("user_name") + "\"}";
                        if (i == 0) {
                            chatTojsonData = chatTojsonData + ss;
                            chatToNamejsonData = chatToNamejsonData + ssname;
                        }
                        else {
                            chatTojsonData = chatTojsonData + "," + ss;
                            chatToNamejsonData = chatToNamejsonData + "," + ssname;
                        }
                    }
                    chatTojsonData = chatTojsonData + "]";
                    chatToNamejsonData = chatToNamejsonData + "]";
                }
                new Ajax.Request('/chat/sendMessage', {
                    method: 'GET',
                    parameters: 'userid=<%=session[:user_id]%>&content=' + encodeURIComponent($('message').value) + "&chatto=" + chatTojsonData + "&chattoname=" + chatToNamejsonData
                });
                $('message').value = "";
            }
        </script>
    </head>
    <body>
        <table width="200" border="1">
            <tr>
                <td height=300>
                    <div id="chat_contents" style="position:relative; width:500px; height:300px; overflow:auto">
                    </div>
                </td>
                <td width='100' valign="top" rowspan="3">
                    <div id="department_list" name="department_list">
                    </div>
                    <div id='online_user_list' style="position:relative;height:400px; overflow:auto">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea name="message" id="message" cols="60" rows="5"></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <input type="button" name="button" id="button" value="发送" onclick="sendMessage()"/>
                </td>
            </tr>
        </table>
        <script>
            function getMessage(){
                new Ajax.Request('/chat/getMessage', {
                    method: 'GET',
                    parameters: '',
                    success: function(result, request){
                        $('chat_contents').scrollTop = parseInt($('chat_contents').scrollHeight);
                    },
                    failure: function(result, request){
                        Ext.MessageBox.alert('消息', '得到内部通信内容失败!');
                    }
                });
                $('chat_contents').scrollTop = parseInt($('chat_contents').scrollHeight);
            }
            //取得实时聊天内容
            message_id = setInterval("getMessage()", 5000);
        </script>
    </body>
</html>
